<template>
    <div class="counter-wrapper">
      <transition name="move">
        <div class="counter-subtract" v-show="removeFlag" @click.prevent.stop="subtractNumber">
          <i class="icon-remove_circle_outline"></i>
        </div>
      </transition>

      <div class="counter-number" v-show="foodCount>0">{{foodCount}}</div>
      <div class="counter-add" @click.prevent.stop="addNumber">
        <i class="icon-add_circle"></i>
      </div>

    </div>
</template>

<script>
    export default {
        name: "FoodCounter",
      props:{
        foodsinfo:{
          type: Object
        }
      },
      computed:{
        removeFlag(){
          if(this.foodCount <=0){
            return false;
          }
          return true;
        },
        foodCount(){
          return parseInt(this.$store.getters.getGoodsCount[this.foodsinfo.name]) || 0;
        }
      },
      data(){
          return{
            ballFlag: false
          }
      },
      methods:{
        //将改变的值存到仓库
        updateStore(){
            let goodsinfo = {
                count: this.nowCount,
                name: this.foodsinfo.name,
                id: this.foodsinfo.name,
                price: this.foodsinfo.price
            }
            this.$store.commit('updateToCar',goodsinfo);
        },
        addNumber(event){
          this.nowCount = this.foodCount;
          this.nowCount++;
          this.ballFlag = true;
          this.updateStore();
          this.$emit('cart-add',event.target);//添加商品时，派发一个事件，将当前DOM传递给goods.vue
        },
        subtractNumber(){
          this.nowCount = this.foodCount;
          this.nowCount--;
          if(this.nowCount<0){
            this.nowCount = 0;
            return;
          }
          this.updateStore();
        }
      }
    }
</script>

<style lang="scss" scoped>
  .counter-wrapper{
      position: relative;
      display: flex;
    .counter-subtract{
      padding: 6px;
    }
    .counter-number{
      line-height: 24px;
      padding:6px 0;
      min-width: 12px;
      font-size: 10px;
      color: rgb(147,153,159);
      text-align: center;
    }
    .counter-add{
      padding: 6px;
    }
    .icon-add_circle,.icon-remove_circle_outline{
      color: rgb(0,160,220);
      font-size: 24px;
      line-height: 24px;
    }
  }
  .move-enter,
  .move-leave-to{
    transform: translate3d(30px,0,0) rotate(180deg);
    opacity: 0;
  }
  .move-enter-active,
  .move-leave-active{
    transition:all 0.4s linear;
  }
  .inner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(0,160,220);
  }

</style>
